<template>
    <div >
        <h3 style="padding: 3px;">直播间留言</h3>
        <Row>
            <Col span="24" class="tool">

            <Button type="default" @click="deleteCom">删除</Button>
            <Button type="default" @click="reset">重置</Button>
            <span style="float: right">
                <!--留言评论
                    <Switch size="large">
                        <span slot="open">禁止</span>
                        <span slot="close">允许</span>
                    </Switch>-->
                    <Input v-model="params.query" placeholder="评论内容或评论者" style="width: 250px" @on-enter="search" ></Input>
                    <Button type="primary" shape="circle" icon="ios-search" @click="search"></Button>
            </span>
            </Col>
        </Row>
        <Row>
            <Col span="24" class="data-table">
                <Table border   size="small" :loading="loading" :columns="listColumn" :data="listData" @on-selection-change="selectionChange" @on-sort-change="sort"></Table>
            </Col>
        </Row>
        <Row style="padding: 20px">
            <Page style="float: right" :total="page.total" :page-size="params.limit"  :current="page.currentPage" @on-change="goPage"></Page>
        </Row>
    </div>
</template>
<script>
    import { getCommentsByLiveRoomId, deleteComments } from '../../api/api'
    export default {
        data (){
            return {
                loading:false,
                listColumn:[
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '评论者',
                        key: 'nickName',
                        width: 100
                    },
                    {
                        title: '评论内容',
                        key: 'comment',
                    },
                    {
                        title: '获得赞数',
                        key: 'commentUp',
                        sortable: true,
                        width: 110
                    },
                    {
                        title: '评论时间',
                        key: 'commentTime',
                        sortable: 'custom',
                        width: 150
                    },
                ],
                listData:[],
                params:{
                    page:1,
                    limit:10,
                    order:'comment_time',
                    sidx:'desc',
                    liveRoomId:this.$store.state.operatedLiveRoomId,
                    query:''
                },
                page:{
                    total:null,
                    totalPage:null,
                    currentPage:1,

                },
                selection:[]
            }
        },
        methods:{
            getListData(){
                this.loading = true
                getCommentsByLiveRoomId(this.params).then(res =>{
                    this.loading = false
                    this.listData = res.page.list
                    this.page.totalPage = res.page.totalPage
                    this.page.total = res.page.totalCount
                    this.page.currentPage = res.page.currPage
                })
            },
            goPage(page){
                this.params.page = page
                this.getListData()
            },
            search(){
                this.getListData()
            },
            sort(column){
                this.params.sidx = column.order
                this.getListData()
            },
            deleteCom(){
                if (this.selection.length == 0){
                    //不可为空
                    return false;
                }else {
                    this.$Modal.confirm({
                        title: '删除直播间',
                        content: '<p>确定删除所选'+this.selection.length+'条留言？</p>',
                        onOk: () => {
                            let ids = []
                            for (var i =0 ;i< this.selection.length; i++){
                                ids.push(this.selection[i].liveRoomCommentId)
                            }
                            deleteComments(ids).then(res =>{
                                if (res.code == 0){
                                    this.getListData()
                                }
                            })
                        },
                        onCancel: () => {

                        }
                    });

                }
            },
            reset(){
                this.params = {
                    page:1,
                        limit:10,
                        order:'comment_time',
                        sidx:'desc',
                        liveRoomId:this.$store.state.operatedLiveRoomId,
                        query:''
                }
                this.getListData()
            },
            selectionChange(selection){
                this.selection = selection
            }
        },
        mounted(){
            this.getListData()
        }
    }
</script>
<style scoped>
    .tool {
        margin-top: 15px;
    }
    .data-table {
        margin-top: 10px;
    }
</style>